<template>
  <div>
    <Modal footer-hide width="90" title="趋势对比" v-model="show">
      <template v-slot:header>
        <span style="font-size: 18px; font-weight: 700">{{ echarsData.title }}</span>
      </template>
      <row>
        <Col span="24">
          <div id="wenShiDu_echars" style="height: 60vh"></div>
        </Col>
      </row>
    </Modal>
  </div>
</template>
<script setup>
  import * as echarts from 'echarts'
  import dayjs from 'dayjs'
  import { ref, onUnmounted, nextTick } from 'vue'

  const myChart = ref(null)
  const show = ref(false)
  // const titleStr = ref('21S OE')
  const color = ref(['#47dfe5', '#70b4f9', '#a07fef', '#fac800', '#4be39d'])
  const echarsData = ref({})

  const hexToRgba = (hex, opacity) => {
    let rgbaColor = ''
    let reg = /^#[\da-f]{6}$/i
    if (reg.test(hex)) {
      rgbaColor = `rgba(${parseInt('0x' + hex.slice(1, 3))},${parseInt(
        '0x' + hex.slice(3, 5)
      )},${parseInt('0x' + hex.slice(5, 7))},${opacity})`
    }
    return rgbaColor
  }

  const modalShow = (data) => {
    echarsData.value = data
    show.value = true
    nextTick(() => {
      handleSetVisitChart()
    })
  }

  const handleSetVisitChart = () => {
    myChart.value = echarts.init(document.getElementById('wenShiDu_echars'))

    let option = {
      backgroundColor: '#fff',
      color: color.value,
      legend: {
        top: 10
      },
      tooltip: {
        trigger: 'axis',
        // formatter: function(params) {
        //   let html = '';
        //   params.forEach(v => {
        //     html += `<div style="color: #666;font-size: 14px;line-height: 24px">
        //       <span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${ _this.color[v.componentIndex]};"></span>
        //       ${v.seriesName}2020.${v.name}
        //       <span style="color:${ _this.color[v.componentIndex]};font-weight:700;font-size: 18px;margin-left:5px">${v.value}</span>
        //       万元`;
        //   })
        //   return html
        // },
        extraCssText:
          'background: #fff; border-radius: 0;box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);color: #333;',
        axisPointer: {
          type: 'shadow',
          shadowStyle: {
            color: '#ffffff',
            shadowColor: 'rgba(225,225,225,1)',
            shadowBlur: 5
          }
        }
      },
      grid: {
        top: 50,
        left: 100,
        right: '70',
        bottom: '5%',
        containLabel: true
      },
      dataZoom: [
        {
          show: true,
          type: 'slider',
          bottom: 0,
          right: 115,
          left: 115,
          labelFormatter: function (value) {
            // 在这里写你需要的时间格式a
            value = dayjs(value).format('YYYY-MM-DD HH:mm')
            return value
          },
          xAxisIndex: [0],
          filterMode: 'weakFilter',
          backgroundColor: '#fafafa',
          minValueSpan: 60
        }
      ],
      xAxis: [
        {
          type: 'time',
          boundaryGap: false,
          axisLabel: {
            formatter: '{value}',
            textStyle: {
              color: '#333'
            }
          },
          axisLine: {
            lineStyle: {
              color: '#D9D9D9'
            }
          }
        }
      ],
      yAxis: [
        {
          type: 'value',
          min: 0,
          max: 50,
          position: 'left',
          axisLabel: {
            formatter: '{value}℃',
            textStyle: {
              color: '#666'
            }
          },
          nameTextStyle: {
            color: '#47dfe5',
            fontSize: 12,
            lineHeight: 40
          },
          // 分割线
          splitLine: {
            lineStyle: {
              type: 'dashed',
              color: '#E9E9E9'
            }
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: '#47dfe5'
            }
          },
          axisTick: {
            show: true
          }
        },
        {
          type: 'value',
          // name: '单位:%',
          position: 'right',
          offset: 0,
          axisLabel: {
            formatter: '{value} %',
            textStyle: {
              color: '#666'
            }
          },
          nameTextStyle: {
            color: color.value[1],
            fontSize: 12,
            lineHeight: 40
          },
          // 分割线
          splitLine: {
            lineStyle: {
              type: 'dashed',
              color: '#E9E9E9'
            }
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: color.value[1]
            }
          },
          axisTick: {
            show: true
          }
        }
      ],
      series: [
        {
          // name: "2018",
          name: echarsData.value.wenDu.title,
          type: 'line',

          smooth: true,
          symbolSize: 8,
          yAxisIndex: 0,
          zlevel: 3,
          showSymbol: false,
          lineStyle: {
            normal: {
              color: color.value[0],
              shadowBlur: 3,
              shadowColor: hexToRgba(color.value[0], 0.5),
              shadowOffsetY: 8
            }
          },
          symbol: 'circle', // 数据交叉点样式
          areaStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(
                0,
                0,
                0,
                1,
                [
                  {
                    offset: 0,
                    color: hexToRgba(color.value[0], 0.3)
                  },
                  {
                    offset: 1,
                    color: hexToRgba(color.value[0], 0.1)
                  }
                ],
                false
              ),
              shadowColor: hexToRgba(color.value[0], 0.1),
              shadowBlur: 10
            }
          },
          data: echarsData.value.wenDu.data,
          markPoint: {
            data: [
              { type: 'max', name: '最大值' },
              { type: 'min', name: '最小值' }
            ]
          },
          markLine: {
            data: [{ type: 'average', name: '平均值' }]
          }
        },
        {
          name: echarsData.value.shiDu.title,
          type: 'line',
          smooth: true,
          symbolSize: 8,
          showSymbol: false,
          yAxisIndex: 1,
          zlevel: 3,
          lineStyle: {
            normal: {
              color: color.value[1],
              shadowBlur: 3,
              shadowColor: hexToRgba(color.value[1], 0.5),
              shadowOffsetY: 8
            }
          },
          symbol: 'circle', // 数据交叉点样式
          areaStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(
                0,
                0,
                0,
                1,
                [
                  {
                    offset: 0,
                    color: hexToRgba(color.value[1], 0.3)
                  },
                  {
                    offset: 1,
                    color: hexToRgba(color.value[1], 0.1)
                  }
                ],
                false
              ),
              shadowColor: hexToRgba(color.value[1], 0.1),
              shadowBlur: 10
            }
          },
          data: echarsData.value.shiDu.data,
          markPoint: {
            data: [
              { type: 'max', name: '最大值' },
              { type: 'min', name: '最小值' }
            ]
          },
          markLine: {
            data: [{ type: 'average', name: '平均值' }]
          }
        }
      ]
    }
    myChart.value?.clear()
    myChart.value?.setOption(option)
    window.addEventListener('resize', function () {
      myChart.value.resize()
    })
  }

  onUnmounted(() => {
    myChart.value?.dispose()
  })
</script>
<style lang="scss"></style>
